<script src="/aifish/common/check.pjax.js"></script>
<article>
    <div class="toc-affix" style="width: 90px; height: 150px;">
        <div class="ant-affix" >
            <ul class="toc demos-anchor">
                <li><a href="#src-components-UserPanel-demo-primary">默认样式</a></li>
            </ul>
        </div>
    </div>
    <section class="markdown">
        <h1>UserPanel用户面板</h1>
        <section class="markdown">
            <p></p>
            <h2 id="何时使用"><span>何时使用</span><a href="#何时使用" class="anchor">#</a></h2>
        </section>
        <h2>代码演示<i class="code-box-expand-trigger anticon anticon-appstore" title="展开全部代码"></i></h2></section>
    <div class="ant-row" style="margin-left: -8px; margin-right: -8px;">
        <div class="ant-col-24 code-boxes-col-2-1" style="padding-left: 8px; padding-right: 8px;">
            <section class="code-box expand" id="src-components-UserPanel-demo-primary">
                <section id="J_vue_4g5l7z4b1t6" class="code-box-demo">
                    <div>
<div class="row">
        <div class="col-md-4">
          <!-- Widget: user widget style 1 -->
          <div class="box box-widget widget-user-2">
            <!-- Add the bg color to the header using any of the bg-* classes -->
            <div class="widget-user-header bg-yellow">
              <div class="widget-user-image">
                <img class="img-circle" src="http://adminlte.la998.com/dist/img/user4-128x128.jpg" alt="User Avatar">
              </div>
              <!-- /.widget-user-image -->
              <h3 class="widget-user-username">Nadia Carmichael</h3>
              <h5 class="widget-user-desc">Lead Developer</h5>
            </div>
            <div class="box-footer no-padding">
              <ul class="nav nav-stacked">
                <li><a href="#">Projects <span class="pull-right badge bg-blue">31</span></a></li>
                <li><a href="#">Tasks <span class="pull-right badge bg-aqua">5</span></a></li>
                <li><a href="#">Completed Projects <span class="pull-right badge bg-green">12</span></a></li>
                <li><a href="#">Followers <span class="pull-right badge bg-red">842</span></a></li>
              </ul>
            </div>
          </div>
          <!-- /.widget-user -->
        </div>
        <!-- /.col -->
        <div class="col-md-4">
          <!-- Widget: user widget style 1 -->
          <div class="box box-widget widget-user">
            <!-- Add the bg color to the header using any of the bg-* classes -->
            <div class="widget-user-header bg-aqua-active">
              <h3 class="widget-user-username">Alexander Pierce</h3>
              <h5 class="widget-user-desc">Founder &amp; CEO</h5>
            </div>
            <div class="widget-user-image">
              <img class="img-circle" src="http://adminlte.la998.com/dist/img/user4-128x128.jpg" alt="User Avatar">
            </div>
            <div class="box-footer">
              <div class="row">
                <div class="col-sm-4 border-right">
                  <div class="description-block">
                    <h5 class="description-header">3,200</h5>
                    <span class="description-text">SALES</span>
                  </div>
                  <!-- /.description-block -->
                </div>
                <!-- /.col -->
                <div class="col-sm-4 border-right">
                  <div class="description-block">
                    <h5 class="description-header">13,000</h5>
                    <span class="description-text">FOLLOWERS</span>
                  </div>
                  <!-- /.description-block -->
                </div>
                <!-- /.col -->
                <div class="col-sm-4">
                  <div class="description-block">
                    <h5 class="description-header">35</h5>
                    <span class="description-text">PRODUCTS</span>
                  </div>
                  <!-- /.description-block -->
                </div>
                <!-- /.col -->
              </div>
              <!-- /.row -->
            </div>
          </div>
          <!-- /.widget-user -->
        </div>
        <!-- /.col -->
        <div class="col-md-4">
          <!-- Widget: user widget style 1 -->
          <div class="box box-widget widget-user">
            <!-- Add the bg color to the header using any of the bg-* classes -->
            <div class="widget-user-header bg-black" style="background: url('../../../dist/assets/img/photo1.png') center center;">
              <h3 class="widget-user-username">Elizabeth Pierce</h3>
              <h5 class="widget-user-desc">Web Designer</h5>
            </div>
            <div class="widget-user-image">
              <img class="img-circle" src="http://adminlte.la998.com/dist/img/user4-128x128.jpg" alt="User Avatar">
            </div>
            <div class="box-footer">
              <div class="row">
                <div class="col-sm-4 border-right">
                  <div class="description-block">
                    <h5 class="description-header">3,200</h5>
                    <span class="description-text">SALES</span>
                  </div>
                  <!-- /.description-block -->
                </div>
                <!-- /.col -->
                <div class="col-sm-4 border-right">
                  <div class="description-block">
                    <h5 class="description-header">13,000</h5>
                    <span class="description-text">FOLLOWERS</span>
                  </div>
                  <!-- /.description-block -->
                </div>
                <!-- /.col -->
                <div class="col-sm-4">
                  <div class="description-block">
                    <h5 class="description-header">35</h5>
                    <span class="description-text">PRODUCTS</span>
                  </div>
                  <!-- /.description-block -->
                </div>
                <!-- /.col -->
              </div>
              <!-- /.row -->
            </div>
          </div>
          <!-- /.widget-user -->
        </div>
        <!-- /.col -->
      </div>
                    </div>
                </section>
                <section class="code-box-meta markdown">
                    <div class="code-box-title"><a href="#src-components-UserPanel-demo-primary">默认样式</a></div>
                    <div>
                         <p></p>
                    </div>
                    <span class="collapse anticon anticon-circle-o-right" ></span>
                </section>
                <section class="highlight-wrapper highlight-wrapper-expand">
                    <div class="highlight">
                        <pre class="language-xml">
<code >&lt;div class=&quot;row&quot;&gt;
        &lt;div class=&quot;col-md-4&quot;&gt;
          &lt;!-- Widget: user widget style 1 --&gt;
          &lt;div class=&quot;box box-widget widget-user-2&quot;&gt;
            &lt;!-- Add the bg color to the header using any of the bg-* classes --&gt;
            &lt;div class=&quot;widget-user-header bg-yellow&quot;&gt;
              &lt;div class=&quot;widget-user-image&quot;&gt;
                &lt;img class=&quot;img-circle&quot; src=&quot;../../../dist/assets/img/user7-128x128.jpg&quot; alt=&quot;User Avatar&quot;&gt;
              &lt;/div&gt;
              &lt;!-- /.widget-user-image --&gt;
              &lt;h3 class=&quot;widget-user-username&quot;&gt;Nadia Carmichael&lt;/h3&gt;
              &lt;h5 class=&quot;widget-user-desc&quot;&gt;Lead Developer&lt;/h5&gt;
            &lt;/div&gt;
            &lt;div class=&quot;box-footer no-padding&quot;&gt;
              &lt;ul class=&quot;nav nav-stacked&quot;&gt;
                &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Projects &lt;span class=&quot;pull-right badge bg-blue&quot;&gt;31&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Tasks &lt;span class=&quot;pull-right badge bg-aqua&quot;&gt;5&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Completed Projects &lt;span class=&quot;pull-right badge bg-green&quot;&gt;12&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Followers &lt;span class=&quot;pull-right badge bg-red&quot;&gt;842&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;!-- /.widget-user --&gt;
        &lt;/div&gt;
        &lt;!-- /.col --&gt;
        &lt;div class=&quot;col-md-4&quot;&gt;
          &lt;!-- Widget: user widget style 1 --&gt;
          &lt;div class=&quot;box box-widget widget-user&quot;&gt;
            &lt;!-- Add the bg color to the header using any of the bg-* classes --&gt;
            &lt;div class=&quot;widget-user-header bg-aqua-active&quot;&gt;
              &lt;h3 class=&quot;widget-user-username&quot;&gt;Alexander Pierce&lt;/h3&gt;
              &lt;h5 class=&quot;widget-user-desc&quot;&gt;Founder &amp;amp; CEO&lt;/h5&gt;
            &lt;/div&gt;
            &lt;div class=&quot;widget-user-image&quot;&gt;
              &lt;img class=&quot;img-circle&quot; src=&quot;../../../dist/assets/img/user1-128x128.jpg&quot; alt=&quot;User Avatar&quot;&gt;
            &lt;/div&gt;
            &lt;div class=&quot;box-footer&quot;&gt;
              &lt;div class=&quot;row&quot;&gt;
                &lt;div class=&quot;col-sm-4 border-right&quot;&gt;
                  &lt;div class=&quot;description-block&quot;&gt;
                    &lt;h5 class=&quot;description-header&quot;&gt;3,200&lt;/h5&gt;
                    &lt;span class=&quot;description-text&quot;&gt;SALES&lt;/span&gt;
                  &lt;/div&gt;
                  &lt;!-- /.description-block --&gt;
                &lt;/div&gt;
                &lt;!-- /.col --&gt;
                &lt;div class=&quot;col-sm-4 border-right&quot;&gt;
                  &lt;div class=&quot;description-block&quot;&gt;
                    &lt;h5 class=&quot;description-header&quot;&gt;13,000&lt;/h5&gt;
                    &lt;span class=&quot;description-text&quot;&gt;FOLLOWERS&lt;/span&gt;
                  &lt;/div&gt;
                  &lt;!-- /.description-block --&gt;
                &lt;/div&gt;
                &lt;!-- /.col --&gt;
                &lt;div class=&quot;col-sm-4&quot;&gt;
                  &lt;div class=&quot;description-block&quot;&gt;
                    &lt;h5 class=&quot;description-header&quot;&gt;35&lt;/h5&gt;
                    &lt;span class=&quot;description-text&quot;&gt;PRODUCTS&lt;/span&gt;
                  &lt;/div&gt;
                  &lt;!-- /.description-block --&gt;
                &lt;/div&gt;
                &lt;!-- /.col --&gt;
              &lt;/div&gt;
              &lt;!-- /.row --&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;!-- /.widget-user --&gt;
        &lt;/div&gt;
        &lt;!-- /.col --&gt;
        &lt;div class=&quot;col-md-4&quot;&gt;
          &lt;!-- Widget: user widget style 1 --&gt;
          &lt;div class=&quot;box box-widget widget-user&quot;&gt;
            &lt;!-- Add the bg color to the header using any of the bg-* classes --&gt;
            &lt;div class=&quot;widget-user-header bg-black&quot; style=&quot;background: url(&#x27;../../../dist/assets/img/photo1.png&#x27;) center center;&quot;&gt;
              &lt;h3 class=&quot;widget-user-username&quot;&gt;Elizabeth Pierce&lt;/h3&gt;
              &lt;h5 class=&quot;widget-user-desc&quot;&gt;Web Designer&lt;/h5&gt;
            &lt;/div&gt;
            &lt;div class=&quot;widget-user-image&quot;&gt;
              &lt;img class=&quot;img-circle&quot; src=&quot;../../../dist/assets/img/user3-128x128.jpg&quot; alt=&quot;User Avatar&quot;&gt;
            &lt;/div&gt;
            &lt;div class=&quot;box-footer&quot;&gt;
              &lt;div class=&quot;row&quot;&gt;
                &lt;div class=&quot;col-sm-4 border-right&quot;&gt;
                  &lt;div class=&quot;description-block&quot;&gt;
                    &lt;h5 class=&quot;description-header&quot;&gt;3,200&lt;/h5&gt;
                    &lt;span class=&quot;description-text&quot;&gt;SALES&lt;/span&gt;
                  &lt;/div&gt;
                  &lt;!-- /.description-block --&gt;
                &lt;/div&gt;
                &lt;!-- /.col --&gt;
                &lt;div class=&quot;col-sm-4 border-right&quot;&gt;
                  &lt;div class=&quot;description-block&quot;&gt;
                    &lt;h5 class=&quot;description-header&quot;&gt;13,000&lt;/h5&gt;
                    &lt;span class=&quot;description-text&quot;&gt;FOLLOWERS&lt;/span&gt;
                  &lt;/div&gt;
                  &lt;!-- /.description-block --&gt;
                &lt;/div&gt;
                &lt;!-- /.col --&gt;
                &lt;div class=&quot;col-sm-4&quot;&gt;
                  &lt;div class=&quot;description-block&quot;&gt;
                    &lt;h5 class=&quot;description-header&quot;&gt;35&lt;/h5&gt;
                    &lt;span class=&quot;description-text&quot;&gt;PRODUCTS&lt;/span&gt;
                  &lt;/div&gt;
                  &lt;!-- /.description-block --&gt;
                &lt;/div&gt;
                &lt;!-- /.col --&gt;
              &lt;/div&gt;
              &lt;!-- /.row --&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;!-- /.widget-user --&gt;
        &lt;/div&gt;
        &lt;!-- /.col --&gt;
      &lt;/div&gt;</code></pre>
                    </div>
                </section>
            </section>

        </div>
    </div>
</article>